<template>
  <view class="container">
    <view class="header">
      <image :src="headerImage" alt=""></image>
    </view>

    <view class="content">
      <view class="user-info">
        <image
          class="avatar"
          :src="
            inviteLogin.avatar !== 'null'
              ? inviteLogin.avatar
              : 'https://oneredhealth.oss-cn-hangzhou.aliyuncs.com/2023/10/23/0e6265fd99fa49a9bacf3791420d6de6.png'
          "
          alt="用户头像"
        ></image>
        <view>
          <text class="name">{{ inviteLogin.name }}</text>
          <text class="label">分享人</text>
          <view class="phone">{{ inviteLogin.mobile }}</view>
        </view>
      </view>
      <view class="border"></view>

      <view>
        <view class="form-item">
          <text class="label">*</text>
          <text class="title">姓名：</text>
          <input
            type="text"
            placeholder="请输入姓名"
            v-model="formData.nickName"
          />
        </view>
        <view class="form-item">
          <text class="label">*</text>
          <text class="title">手机号：</text>
          <input
            type="number"
            placeholder="请输入手机号"
            v-model="formData.mobile"
          />
        </view>
        <view class="form-item">
          <text class="title">所在行业：</text>
          <input
            type="text"
            placeholder="请输入所在行业"
            v-model="formData.industry"
          />
        </view>
        <view class="form-item">
          <text class="title">所在公司：</text>
          <input
            type="text"
            placeholder="请输入所在公司"
            v-model="formData.company"
          />
        </view>
        <button class="submit-btn" @click="handleSubmit">完成</button>
      </view>
    </view>
  </view>
</template>

<script>
import { getInviteToBeSalesman, getCustomerInfoByToken } from "@/api/login";
import { mapGetters } from "vuex";

export default {
  data() {
    return {
      userData: {},
      headerImage:
        "https://beeten-picks-file.oneredhealth.com/merchant/20251024/icon1_1761288276306.png",

      formData: {
        inviterCustomerId: "",
        nickName: "",
        mobile: "",
        industry: "",
        company: "",
      },
      userInfo: {
        avatar: "",
        mobile: "",
        name: "",
      },
    };
  },
  computed: {
    ...mapGetters(["isLogin", "inviteLogin"]),
  },

  onLoad(options) {
    console.log(this.inviteLogin, "进来了");

    if (options) {
      // 将options存储到Vuex中
      this.$store.commit("SET_INVITE_OPTIONS", options);
      this.getInfo();
    }
  },
  methods: {
    async getInfo() {
      const res = await getCustomerInfoByToken();
      if (res.code === 200) {
        this.userData = res.data;
      }
    },
    async handleSubmit() {
      if (!this.isLogin) {
        // this.$store.commit("SET_LOGOUT");
        uni.navigateTo({
          url: `/pages/user/phone/indexApp`,
        });
        return;
      }
      const { nickName, mobile } = this.formData;
      if (!nickName.trim()) {
        uni.$u.toast("请输入姓名");
        return;
      }
      if (!mobile.trim()) {
        uni.$u.toast("请输入手机号");
        return;
      }
      const phoneRegex = /^1[3-9]\d{9}$/;
      if (!phoneRegex.test(mobile)) {
        uni.$u.toast("请输入正确的手机号");
        return;
      }
      try {
        const params = {
          inviterCustomerId: this.userData.id,
          nickName: this.formData.nickName,
          mobile: this.formData.mobile,
          industry: this.formData.industry,
          companyName: this.formData.company,
        };
        const res = await getInviteToBeSalesman(params);
        uni.$u.toast(res.msg);
      } catch (error) {
        uni.$u.toast(res.msg);
      }
    },
  },
};
</script>

<style scoped lang="scss">
.container {
  height: 100vh;
  width: 100vw;
  background-color: #f0f2f6;
  .header {
    image {
      width: 100%;
    }
  }
  .content {
    width: 90%;
    padding: 20rpx;
    background: #ffffff;
    border-radius: 48rpx;
    position: absolute;
    top: 200rpx;
    left: 0;
    right: 0;
    margin: auto;
    .user-info {
      display: flex;
      align-items: center;
      padding: 10rpx;

      .avatar {
        width: 92rpx;
        height: 92rpx;
        border-radius: 50%;
        margin-right: 20rpx;
      }

      .name {
        font-family: PingFang SC, sans-serif;
        font-weight: bold;
        font-size: 32rpx;
        color: #3d3d3d;
        line-height: 44rpx;
      }

      .label {
        padding: 4rpx 15rpx;
        margin-left: 20rpx;
        background: #facb02;
        border-radius: 8rpx;
      }

      .phone {
        font-family: PingFang SC, sans-serif;
        font-weight: 400;
        font-size: 24rpx;
        color: #777777;
        margin-top: 10rpx;
      }
    }
    .border {
      border-top: 2rpx solid #eeeeee;
      width: 95%;
      margin: 30rpx auto;
    }

    .form-item {
      margin-top: 48rpx;

      .label {
        color: red;
      }

      .title {
        font-family: PingFang SC, sans-serif;
        font-weight: 400;
        font-size: 32rpx;
        color: #3d3d3d;
        line-height: 34rpx;
      }

      input {
        flex: 1;
        padding: 22rpx;
        background: #f7f7f7;
        border-radius: 16rpx;
        font-family: PingFang SC, sans-serif;
        font-weight: 400;
        font-size: 28rpx;
        color: #aaaaaa;
        line-height: 34rpx;
        margin-top: 28rpx;
      }
    }

    .submit-btn {
      width: 100%;
      background: #588bf3;
      border-radius: 40rpx;
      color: white;
      border: none;
      margin-top: 30px;
      &[disabled] {
        background: #a0c4f5;
      }
    }
  }
}
</style>
